<template>
	<view class="page">
		<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="listData" @query="query" :default-page-no="1"
			:default-page-size="10" @scroll='scroll'>
			<template v-if="loading">
				<teacherCenterSkeleton />
			</template>
			<template v-else>
				<u-navbar leftIconSize='30rpx' @leftClick="$utils.back()" :placeholder="true">
					<view slot='center' class="navTitle">
						<text class='choose' >个人</text>
						<text  @click="jumpHome">家庭</text>
					</view>
				</u-navbar>
				<view class="tabBox" v-if="scrollTop>=550" :style="{top:customNavHeight}"
					style="margin-top: 0;position: fixed;background-color: #fff;width: 100vw;">
					<u-tabs :inactiveStyle='{fontSize:"26rpx"}' :activeStyle='{fontSize:"26rpx"}' :scrollable='false'
						:list="list" :current='current' lineColor="#FB2222" @click="click" />
				</view>
				<view class="headerBox" :style="{paddingTop:statusHeight}">
		
		
					<image v-if='data.profile.bg_image' :src="data.profile.bg_image" mode='center'></image>
					<view v-else class="bg"></view>
				</view>
				<view class="userBox">
					<view class="avatar">
						<u-avatar :src="data.avatar" size='94rpx'></u-avatar>
					</view>
					<view class="nickName">
						{{data.nick_name}}
					</view>
					<view class="info">
						<view>
							关注：{{data.following_count}}
						</view>
						<view style="width: 10px;" />
						<view>
							粉丝：{{data.follower_count}}
						</view>
					</view>
		
					<view style="display: flex;align-items: center;justify-content: center;">
						<view class="followBu" @click="Followed">
							{{isFollowed?'已关注':'+关注'}}
						</view>
					</view>
				</view>
				<view class="tabBox">
					<u-tabs :inactiveStyle='{fontSize:"26rpx"}' :activeStyle='{fontSize:"26rpx"}' :scrollable='false'
						:list="list" :current='current' lineColor="#FB2222" @click="click" />
				</view>
				<conquer v-if="current==0" :loading='listLoading' :data='listData'/>
				<centerActive v-if="current==1" :loading='listLoading' :data='listData'/>
			</template>
		
		</z-paging>
	</view>
</template>

<script>
	import teacherCenterSkeleton from './components/teacherCenterSkeleton.vue'
	import conquer from './components/conquer.vue'
	import centerActive from './components/center_active.vue'
	export default {
		components: {
			teacherCenterSkeleton,
			conquer,
			centerActive
		},

		data() {
			return {
				listLoading: true,
				listData: [],
				data: {},
				op: '',
				statusHeight: 0,
				loading: true,
				list: [{
					name: '挑战',
				}, {
					name: '动态',
				}],
				current: 0,
				scrollTop: 0,
				customNavHeight: 0,
				isFollowed: false,
			}
		},
		onLoad(op) {
			this.op = op
			this.getDetail(op.id)
			const res = uni.getMenuButtonBoundingClientRect()
			this.statusHeight = res.top * 2 + 'rpx' //胶囊距离顶部
			const res2 = uni.getSystemInfoSync()
			this.customNavHeight = res2.statusBarHeight + 44 + 'px' //顶部状态栏+顶部导航，大部分机型默认44px
		},
		methods: {
			jumpHome(){
				uni.redirectTo({
					url:"/User/home?id="+this.op.id
				})
			},
			query(page, size) {
				let obj = {
					page,
					size,
					user_id:this.op.id
				}
				uni.showLoading({
					title: '加载中...'
				})
				if (this.current == 0) {
					this.$api.User.ConquerList(this.op.id,obj).then(res => {
						uni.hideLoading()
						this.$refs.paging.complete(res.data.data)
						this.listLoading = false
					}).catch(err => {
						uni.hideLoading()
						uni.$u.toast(err.data.message)
					})
				}else{
					this.$api.Active.AllList(obj).then(res => {
						this.$refs.paging.complete(res.data.list)
						uni.hideLoading()
						this.listLoading = false
					}).catch(err => {
						uni.$u.toast(err.data.message)
						uni.hideLoading()
					})
				}

			},
			scroll(event) {
				this.scrollTop = event.detail.scrollTop
				console.log(this.scrollTop)
			},
			click(e) {
				this.current = e.index
				this.listLoading = true
				this.$refs.paging.reload()
			},
			getDetail(id) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.User.Detail(id).then(res => {
					uni.hideLoading()
					this.loading = false
					this.data = res.data.user
					this.isFollowed = res.data.isFollowed
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tagBox {
		flex-wrap: wrap;
		display: flex;
		margin-top: 10rpx;
		padding: 0 40rpx;

		>text {
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			border: 1rpx solid #f5f5f5;
			font-size: 26rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.choose {
			color: #fff;
			background-color: #FB2222;
			border: 1rpx solid #FB2222;
		}
	}

	.page {
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */
		box-sizing: border-box;
	}

	.headerBox {
		height: 40vh;
		position: relative;

		>image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
	}

	.left {
		margin-left: 40rpx;
		position: relative;
		z-index: 2;
	}

	.bg {
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #2c4878, #314d7d, #173162);
		position: absolute;
		top: 0;
	}
	.uuidBox {
    margin-top: 10rpx;
		display: flex;
	}

	.userBox {
		width: calc(100vw - 80rpx);
		margin-left: 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 10rpx 20rpx #eee;
		height: 300rpx;
		position: relative;
		top: -50rpx;
		z-index: 3;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.avatar {
			position: relative;
			top: -47rpx;
		}

		.nickName {
			font-size: 32rpx;
			margin-top: -30rpx;
		}

		.info {
			display: flex;
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.tagBox {
			display: flex;
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.followBu {
			width: 120rpx;
			border-radius: 100rpx;
			color: #fff;
			background-color: #FB2222;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			height: 48rpx;
			margin: 20rpx 20px 0;
		}

		.scroll_view_x {
			height: 20%;
			border-radius: 0 0 16rpx 16rpx;
			border-top: 1px solid #f1f1f1;
			position: absolute;
			bottom: 0;
			width: calc(100vw - 80rpx);
		}

		.Group {
			width: calc(100vw - 80rpx);
			border-radius: 0 0 16rpx 16rpx;
			display: flex;
			height: 100%;
			align-items: center;
			box-sizing: border-box;
			justify-content: space-between;
			padding: 0 40rpx;

			>image {
				width: 90rpx;
				height: 50rpx;
				border-radius: 4rpx;
			}

			>view:nth-child(2) {
				display: flex;
				font-size: 20rpx;
				justify-content: space-between;
				flex-direction: column;
				flex: 0.9;
				height: 50rpx;
			}

			>view:nth-child(3) {
				color: #FB2222;
				border: 1rpx solid #FB2222;
				border-radius: 100rpx;
				width: 90rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
			}
		}
	}

	.tabBox {
		margin-top: -40rpx;
		padding: 0 40rpx;
		z-index: 3;
	}
	.navTitle {
		font-size: 26rpx;
		font-weight: 600;
	
		>text {
			margin: 0 10rpx;
		}
	}
	.choose {
		font-size: 28rpx;
		color: #3975c6
	}
</style>